<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello WebSocket</title>
    <link
      href="webjars/bootstrap/4.2.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="webjars/jquery/3.5.0/jquery.min.js"></script>
    <script src="webjars/sockjs-client/1.1.2/sockjs.min.js"></script>
    <script src="webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
    <script type="text/javascript">
      var stompClient = null

      function setConnected(connected) {
        $('#connect').prop('disabled', connected)
        $('#disconnect').prop('disabled', !connected)
        if (connected) {
          $('#conversation').show()
        } else {
          $('#conversation').hide()
        }
        $('#greetings').html('')
      }

      function connect() {
        var socket = new SockJS('gs-guide-websocket') //对应后端  registry.addEndpoint("gs-guide-websocket")
        stompClient = Stomp.over(socket)
        stompClient.connect({}, function(frame) {
          setConnected(true)
          console.log('Connected: ' + frame)
          stompClient.subscribe('topic/greetings', function(greeting) {
            showGreeting(JSON.parse(greeting.body).content)
          })
        })
      }

      function disconnect() {
        if (stompClient !== null) {
          stompClient.disconnect()
        }
        setConnected(false)
        console.log('Disconnected')
      }

      function sendName() {
        stompClient.send(
          'app/hello',
          {},
          JSON.stringify({ name: $('#name').val() })
        )
        //stompClient.send 目标地址  配置的前缀 +普通的http接口
      }

      function showGreeting(message) {
        $('#greetings').append('<tr><td>' + message + '</td></tr>')
      }

      $(function() {
        $('form').on('submit', function(e) {
          e.preventDefault()
        })
        $('#connect').click(function() {
          connect()
        })
        $('#disconnect').click(function() {
          disconnect()
        })
        $('#send').click(function() {
          sendName()
        })
      })
    </script>
    <style type="text/css">
      body {
        background-color: #f5f5f5;
      }

      #main-content {
        max-width: 940px;
        padding: 2em 3em;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <noscript>
      <h2 style="color: #ff0000">
        Seems your browser doesn't support Javascript! Websocket relies on
        Javascript being enabled. Please enable Javascript and reload this page!
      </h2>
    </noscript>
    <div id="main-content" class="container">
      <div class="row">
        <div class="col-md-6">
          <form class="form-inline">
            <div class="form-group">
              <label for="connect">WebSocket connection:</label>
              <button id="connect" class="btn btn-default" type="submit">
                Connect
              </button>
              <button
                id="disconnect"
                class="btn btn-default"
                type="submit"
                disabled="disabled"
              >
                Disconnect
              </button>
            </div>
          </form>
        </div>
        <div class="col-md-6">
          <form class="form-inline">
            <div class="form-group">
              <label for="name">What is your name?</label>
              <input
                type="text"
                id="name"
                class="form-control"
                placeholder="Your name here..."
              />
            </div>
            <button id="send" class="btn btn-default" type="submit">
              Send
            </button>
          </form>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <table id="conversation" class="table table-striped">
            <thead>
              <tr>
                <th>Greetings</th>
              </tr>
            </thead>
            <tbody id="greetings"></tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>
